<template>
	<view>
		<view class="content">
			<scroll-view scroll-y="true" class="nave-left" :scroll-into-view="scrollToLeft">
				<view class="scroll">
					<view class="goods-type" :class="{ isSelect: scrollToLeft === 'idx' + index }"
						v-for="(val, index) in items" :key="index" @click="scrollRight(index)" :id="'idx' + index">
						{{ val.name }}
					</view>
				</view>
			</scroll-view>
			<scroll-view scroll-y="true" class="nav-right" :scroll-into-view="scrollToRight" scroll-with-animation=""
				@scroll="scrolling">
				<view class="scroll">
					<view class="goods-list" v-for="(val, index) in items" :key="index" :id="'id' + index">

						<view class="goods-body" v-for="(item, idx) in val.children" :key="idx"
							style="display: flex;flex-direction: row;">
							<view style="display: flex;flex-direction: row;justify-content: space-between">
								<image src="../../static/shop/可乐.jpg"
									style="height: 45rpx;width: 20rpx;margin-left: 10px;"></image>

								<p style="font-size: 5px;margin-left: 10px;width: 45px;">{{item.name}}</p>

								<view style="margin-left: 30px;">
									<uni-number-box @change="changeValue" />
								</view>
							</view>
							<!-- {{ item.name }} -->
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'goodsSecond',
		data() {
			return {
				shopimge: 'https://img.zcool.cn/community/0146905d7e0a8da801211d537d7df4.jpg@0o.jpg',
				scrollToRight: '',
				nodeHeight: [],
				scrollToLeft: 'idx0',

				items: [{
					name: '商品列表',
					children: [{
							name: '可乐'
						},
						{
							name: '薯片'
						},
						{
							name: '百岁山'
						},
						{
							name: '可乐'
						},
						{
							name: '薯片'
						},
						{
							name: '百岁山'
						}
					]
				}]
			};
		},
		mounted() {
			this.getGoodsLsit();
		},
		methods: {
			changeValue(value) {
				console.log('返回数值：', value);
			},
			getGoodsLsit() {
				let view = uni
					.createSelectorQuery()
					.in(this)
					.selectAll('.goods-list');

				view.boundingClientRect(data => {
					console.log('得到布局位置信息');
					this.nodeHeight = data;
					console.log(data);
				}).exec();
			},
			scrollRight(index) {
				this.scrollToRight = 'id' + index;
				this.scrollToLeft = 'idx' + index;
			},
			scrolling(e) {
				this.scrollLeft(Math.ceil(e.detail.scrollTop));
				console.log(e.detail);
			},
			scrollLeft(e) {
				for (let i = 2; i < this.nodeHeight.length; i++) {
					if (e > this.nodeHeight[i - 1].top && e < this.nodeHeight[i].top) {
						this.scrollToLeft = 'idx' + (i - 1);
					} else if (e > this.nodeHeight[this.nodeHeight.length - 1].top) {
						this.scrollToLeft = 'idx' + (this.nodeHeight.length - 1);
					} else if (e < this.nodeHeight[1].top) {
						this.scrollToLeft = 'idx0';
						this.scrollToRight = 'id0';
					}
					this.scrollToRight = '';
				}
			}
		}
	};
</script>

<style>
	.content {
		width: 100%;
		height: 100%;
		display: flex;
	}

	.nave-left {
		width: 187rpx;
		height: 100%;
	}

	.nav-right {
		width: 562rpx;
		height: 100%;
	}

	.scroll {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.goods-type {
		width: 150rpx;
		height: 80rpx;
		box-shadow: 0px 4px 7px 1px rgba(206, 148, 5, 0.24);
		border-radius: 20px;

		display: flex;
		align-items: center;
		justify-content: center;

		font-size: 24rpx;
		font-family: Microsoft YaHei UI;
		font-weight: 400;
		color: #a1a1a1;
	}

	.isSelect {
		border: 2rpx solid rgb(206, 148, 5);
	}

	.goods-list {
		width: 500rpx;
	}

	.goods-head {
		width: 500rpx;
		height: 80rpx;
		display: flex;
		align-items: center;
	}

	.goods-body {
		width: 500rpx;
		height: 150rpx;

		display: flex;
		align-items: center;

		box-shadow: 0px 4px 7px 1px rgba(206, 148, 5, 0.24);
		border-radius: 20px;
	}
</style>
